<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { get_video } from '../../utils/api';
import VideoS from '../Cardchi/VideoS.vue';
const props = defineProps({
  numlist: {
    type: String,
    default: ''
  }
});
const router = useRouter();
const videolist: any = reactive({
  arrs: []
});
onMounted(async () => {
  let res = await get_video();
  if (res.data.code === 200) {
    videolist.arrs = res.data.data;
    // console.log(videolist.arrs);
  }
});
// video视频ref事件
// 左侧按钮
const videoleft = ref();
// 右侧按钮
const videoright = ref();
// 第二层盒子
const videomain = ref();
// 第一层盒子
const boxvideo = ref();
// 计算第二层盒子子元素的长度
const videolength = ref();
// 计算第二层盒子下面第一个盒子的宽度
const videowidth = ref();
// 计算第二层盒子最后一个子元素的宽度
const videolast = ref();

// 获取页面的尺寸距离
onMounted(() => {
  // 计算第二层盒子元素的长度
  videolength.value = videomain.value.children.length;
  // 计算第二层盒子下面第一个内容的实际宽度
  videowidth.value = videomain.value.children[0].scrollWidth;
  // 最后一个子节点
  videolast.value = videomain.value.lastChild;
});

// 监听页面尺寸发生的变化
window.addEventListener('resize', () => {
  // 计算第二层盒子下面第一个内容的实际宽度
  videowidth.value = videomain.value.children[0].scrollWidth;
});

const leftvideo = () => {
  // 判断第一层盒子距离左侧的距离如果小于或等于0时
  // 调用滚动函数，滚动到右边，并显示右边按钮
  ScrollFun(boxvideo.value, boxvideo.value.scrollLeft - videowidth.value * 2, 0)(videoright.value, 'block');
  if (boxvideo.value.scrollLeft - videowidth.value * 2 <= 0) {
    // 调用滚动函数，滚动到右边，并隐藏左边按钮
    ScrollFun()(videoleft.value, 'none')(videoright.value.style, 'none');
  }
};

const rightvideo = () => {
  // 判断第一层盒子距离左侧的距离加上第一层盒子的真实宽度加上2如果大于或等于第一层盒子的实际宽度时
  // 调用滚动函数，滚动到左边边，并显示左边按钮
  ScrollFun(boxvideo.value, boxvideo.value.scrollLeft + videowidth.value * 2, 0)(videoleft.value, 'block');
  if ((boxvideo.value.scrollLeft + (videowidth.value * 2) + boxvideo.value.offsetWidth) + 2 >= boxvideo.value.scrollWidth) {
    // 调用滚动函数，滚动到左边,并隐藏右边按钮
    ScrollFun()(videoright.value, 'none')(videoleft.value, 'block');
  }
};

const more = () => {
  router.push('/gengduo');
};

// 复用函数
function ScrollFun(VideoElement?: HTMLElement, viedoxTo?: number, videoyTo?: number) {
  if (VideoElement) VideoElement.scrollTo(viedoxTo ? viedoxTo : 0, videoyTo ? videoyTo : 0);
  return function (videoement?: any, videoHidden?: String) {
    if (videoement) videoement.style.display = videoHidden;
    return function (videoement1?: any, videoHidden1?: String) {
      if (videoement1) videoement1.style.display = videoHidden1;
    };
  };
}

</script>

<template>
  <div class="video-box">
    <div class="video-h">
      <h2>{{ props.numlist }}</h2><span class="span-mian"><b>免费使用</b></span>
    </div>
    <div class="video" ref="boxvideo">
      <div class="video-main" ref="videomain">
        <div v-for="(item, index) in videolist.arrs" :key="index" class="video-main-img"
          :style="{ width: (190 + 20) * videolist.arrs.length + 'px' }">
          <VideoS :datas="item" :videoHeight="'270'"></VideoS>
        </div>
        <div class="video-right-main">
          <div class="video-right-main-right" @click="more()">
            <p>→</p>
          </div>
          <p class="qq">查看更多</p>
        </div>
      </div>
      <div class="video-left" ref="videoleft" @click="leftvideo()">
        &lt;
      </div>
      <div class="video-right" ref="videoright" @click="rightvideo()">
        &gt;
      </div>
    </div>
  </div>
</template>

<style scoped>
.video-box {
  min-width: 100px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.video-h {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
}

.video {
  height: 400px;
  overflow-x: scroll;
  scroll-behavior: smooth;

}

::-webkit-scrollbar {
  display: none;
}

.video-main {
  display: flex;
}

.video-main-img {
  width: 190px;
  height: 300px;
  float: left;
  margin-right: 30px;
  border-radius: 5px;
}


.video-main-img:hover {
  transition: all 0.5s;
  transform: translateY(-20px);
}


.video-main-img:hover .video-footer {
  display: block;
}

.span-mian {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: #F3F4F7;
  text-align: center;
  margin-left: 80px;
  margin-top: 20px;
  line-height: 30px;
  border-radius: 17px;
  color: rgb(18, 97, 255);
  cursor: pointer;
}

h2 {
  float: left;
}

.video-left {
  width: 40px;
  height: 40px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  position: absolute;
  left: 20px;
  top: 180px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  display: none;
  z-index: 9999;
}

.video-left:hover {
  background: rgb(18, 97, 255);
  color: #fff;
}

.video-right:hover {
  background: rgb(18, 97, 255);
  color: #fff;
}

.video-right {
  width: 40px;
  height: 40px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  position: absolute;
  right: 15px;
  top: 180px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
}

.video-right-main {
  height: 270px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

}

.video-right-main-right {
  width: 50px;
  height: 50px;
  background-color: #F5F7FB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-right-main-right:hover {
  background: rgb(18, 97, 255);
  color: #fff;
}

.video-right-main-right p {
  font-size: 30px;
}

.qq {
  display: flex;
  width: 150px;
  align-items: center;
  justify-content: center;
}
</style>
